<template>
  <pro-provider :i18n="t" :content-width="contentWidth">
    <a-layout class="ant-pro-basicLayout">
      <template v-if="isMobile">
        <a-drawer
          :bodyStyle="{ padding: 0, height: '100%' }"
          placement="left"
          :width="sideWidth"
          :closable="false"
          :visible="!collapsed"
          @update:visible="updateCollapsed"
        >
          <sider-menu
            style="height: 100%"
            :theme="theme"
            :layout="layout"
            :fixed="fixedSidebar"
            :menus="menus"
            :sider-width="sideWidth"
            :split-menus="false"
            :collapsed-button="false"
            :collapsed="false"
            v-model:open-keys="openKeys"
            v-model:selected-keys="selectedKeys"
          />
        </a-drawer>
      </template>
      <sider-menu
        v-else-if="!hasTopMenu"
        :theme="theme"
        :layout="layout"
        :fixed="fixedSidebar"
        :menus="menus"
        :sider-width="sideWidth"
        :split-menus="splitMenus"
        :collapsed-button="!splitMenus"
        v-model:collapsed="collapsed"
        v-model:open-keys="openKeys"
        v-model:selected-keys="selectedKeys"
      />
      <a-layout>
        <header-view
          :theme="theme"
          :layout="layout"
          :menus="menus"
          :sider-width="sideWidth"
          :has-sider-menu="hasSideMenu"
          :fixed-header="fixedHeader"
          :split-menus="splitMenus"
          v-model:collapsed="collapsed"
          v-model:open-keys="openKeys"
          v-model:selected-keys="selectedKeys"
        >
          <div style="text-align: right">
            <!-- <a @click="handleversionRef">关于</a> -->
            <!-- <notice-icon /> -->
            <a @click="showModal">弹窗</a>
            <a-badge class="iconBell" :count="totalCount" @click="showDrawer">
              <bell-outlined />
            </a-badge>
            <avatar-dropdown
              :current-user="currentUser"
              @handleshow="handlepasshow"
              @onEdition="handleversionRef"
            />
            <!-- <select-lang /> -->
          </div>
        </header-view>
        <multi-tab v-if="multiTab" :fixed="multiTabFixed" :sider-width="sideWidth" />
        <router-view v-slot="{ Component }">
          <wrap-content>
            <component :is="Component"></component>
          </wrap-content>
        </router-view>
        <global-footer />
      </a-layout>
    </a-layout>
    <setting-drawer v-if="visible" />
    <passmodal ref="passRef" />
    <version ref="versionRef" />
  </pro-provider>
  <a-modal :footer="null" v-model:visible="movisible" title="消息提醒" @ok="handleOk">
    <a-timeline>
      <a-timeline-item v-for="record in tableData" :key="record.modelId" color="gray">
        <div>{{ record.createTime }}</div>
        <div class="remind">
          <span
            class="iconfont iconPosition"
            :class="
              record.classifyType == 1
                ? 'icon-AIjiaobiao'
                : record.classifyType == 2
                ? 'icon-jiejingjiaobiao'
                : 'icon-fankuijiaobiao'
            "
          ></span>
          <div class="drawer">
            <div style="cursor: pointer" @click="modelClick(record.id)">
              {{ record.modelName }}
              <a-button
                type="primary"
                style="margin-left: 20px"
                size="small"
                @click="modelClick(record.id)"
              >
                详情
              </a-button>
            </div>
            <!-- <div
            
              class="read"
              :style="
                1 == 2
                  ? { color: '#FE0E47', border: '1px solid #FE0E47' }
                  : { color: '#B9C4DD', border: '1px solid #B9C4DD' }
              "
            >
              {{ 1 == 2 ? '未读' : '已读' }}
            </div> -->
            <p :style="{ color: warnLevelColor(record) }" class="level-style" style="margin: 0">
              <img :src="record.path" alt="" />
              <span>{{ record.levelText }}</span>
            </p>
          </div>
          <div v-for="(item, index) in record.rule" :key="index" style="margin-top: 5px">
            <span :title="item.xqdwCode" style="margin: 0 6px 0 0" v-if="item.xqdwCode.length">
              <span v-for="(o, ind) in item.xqdwCode" :key="ind" style="margin-right: 4px">
                {{ o }}
              </span>
            </span>
            <span v-else style="margin-right: 6px">全部辖区</span>
            <span
              :title="item.classifyCode"
              style="margin: 0 6px 0 0"
              v-if="item.classifyCode.length && item.classifyCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.classifyCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.callSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.callSummaryCode.length && item.callSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.callSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.dealSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.dealSummaryCode.length && item.dealSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.dealSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>
            <span v-if="item.type == 'T'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              起,
              <span style="color: #60b5ff">去年同期</span>
              发生
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              起,
              <span style="color: #60b5ff">同比</span>
              上升
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ `${item.percent}%` }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
            </span>
            <span v-if="item.type == 'H'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              起,
              <span style="color: #60b5ff">环比上期</span>
              发生
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              起,
              <span style="color: #60b5ff">环比</span>
              上升
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.percent }}%
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
            </span>
            <span v-if="item.type == 'N'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.dqNum }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
              起
            </span>
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </a-modal>
  <!-- 消息提醒 -->
  <a-drawer
    :destroyOnClose="destroyOnClose"
    :width="800"
    v-model:visible="drvisible"
    @close="onClose"
  >
    <template #title>
      <div class="drawer">
        <div>{{ statusNews === 1 ? '消息提醒' : '信息中心设置' }}</div>
        <div v-if="statusNews === 1" class="coreSetup" @click="setupClick">信息中心设置</div>
      </div>
    </template>
    <a-timeline v-if="statusNews === 1">
      <a-timeline-item v-for="record in tableData" :key="record.modelId" color="gray">
        <div>{{ record.createTime }}</div>
        <div class="remind">
          <span
            class="iconfont iconPosition"
            :class="
              record.classifyType == 1
                ? 'icon-AIjiaobiao'
                : record.classifyType == 2
                ? 'icon-jiejingjiaobiao'
                : 'icon-fankuijiaobiao'
            "
          ></span>
          <div class="drawer">
            <div style="cursor: pointer" @click="modelClick(record.id)">
              {{ record.modelName }}
              <a-button
                type="primary"
                style="margin-left: 20px"
                size="small"
                @click="modelClick(record.id)"
              >
                详情
              </a-button>
            </div>
            <!-- <div
            
              class="read"
              :style="
                1 == 2
                  ? { color: '#FE0E47', border: '1px solid #FE0E47' }
                  : { color: '#B9C4DD', border: '1px solid #B9C4DD' }
              "
            >
              {{ 1 == 2 ? '未读' : '已读' }}
            </div> -->
            <p :style="{ color: warnLevelColor(record) }" class="level-style" style="margin: 0">
              <img :src="record.path" alt="" />
              <span>{{ record.levelText }}</span>
            </p>
          </div>
          <div v-for="(item, index) in record.rule" :key="index" style="margin-top: 5px">
            {{ index + 1 }}.
            <span :title="item.xqdwCode" style="margin: 0 6px 0 0" v-if="item.xqdwCode.length">
              <span v-for="(o, ind) in item.xqdwCode" :key="ind" style="margin-right: 4px">
                {{ o }}
              </span>
            </span>
            <span v-else style="margin-right: 6px">全部辖区</span>
            <span
              :title="item.classifyCode"
              style="margin: 0 6px 0 0"
              v-if="item.classifyCode.length && item.classifyCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.classifyCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.callSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.callSummaryCode.length && item.callSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.callSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>

            <span
              :title="item.dealSummaryCode"
              style="margin: 0 6px 0 0"
              v-if="item.dealSummaryCode.length && item.dealSummaryCode[0] != ''"
            >
              <m-tag
                :type="record.classifyType == '1' ? 'ai' : record.classifyType == '2' ? 'jq' : 'fk'"
                v-for="(o, i) in item.dealSummaryCode"
                :key="i"
              >
                {{ o }}
              </m-tag>
            </span>
            <span v-if="item.type == 'T'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              起,
              <span style="color: #60b5ff">去年同期</span>
              发生
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              起,
              <span style="color: #60b5ff">同比</span>
              上升
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ `${item.percent}%` }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
            </span>
            <span v-if="item.type == 'H'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span style="color: #60b5ff">{{ item.dqNum }}</span>
              起,
              <span style="color: #60b5ff">环比上期</span>
              发生
              <span style="color: #60b5ff">{{ item.tqNum }}</span>
              起,
              <span style="color: #60b5ff">环比</span>
              上升
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.percent }}%
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
            </span>
            <span v-if="item.type == 'N'">
              <span style="color: #60b5ff">{{ setPeriod(item.period) }}</span>
              当期发生
              <span
                :class="
                  item.level == '1'
                    ? 'yjhong'
                    : item.level == '2'
                    ? 'yjcheng'
                    : item.level == '3'
                    ? 'yjhuang'
                    : 'yjlan'
                "
              >
                {{ item.dqNum }}
                <img src="@/assets/ht.png" alt="" v-if="item.level == 1" class="imgps" />
                <img src="@/assets/lt.png" alt="" v-if="item.level == 4" class="imgps" />
                <img src="@/assets/huangt.png" alt="" v-if="item.level == 3" class="imgps" />
                <img src="@/assets/ct.png" alt="" v-if="item.level == 2" class="imgps" />
              </span>
              起
            </span>
          </div>
        </div>
      </a-timeline-item>
      <a-pagination
        v-if="totalCount"
        style="text-align: center; margin-top: 20px"
        show-quick-jumper
        show-size-changer
        v-model:current="params.page"
        :pageSize="params.size"
        :total="totalCount"
        @change="onChange"
        @showSizeChange="onShowSizeChange"
        :pageSizeOptions="['10', '20', '30', '50']"
      />
    </a-timeline>
    <div v-else>
      <div>打开状态若有预警信息则在弹窗中出现。关闭状态则都在信息中心出现</div>
      <br />
      <a-row class="switch">
        <a-col :span="14">
          <div>预警信息弹窗提醒</div>
          <div>红色预警弹窗</div>
          <div>橙色预警弹窗</div>
          <div>黄色预警弹窗</div>
          <div>蓝色预警弹窗</div>
        </a-col>
        <a-col :span="10">
          <div>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="state.checked1"
            />
          </div>
          <div>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="state.checked2"
            />
          </div>
          <div>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="state.checked3"
            />
          </div>
          <div>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="state.checked4"
            />
          </div>
          <div>
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="state.checked5"
            />
          </div>
        </a-col>
      </a-row>
      <div style="margin-top: 50px">
        弹窗频率：
        <a-radio v-model:checked="checked">20分钟</a-radio>
        <a-radio v-model:checked="checked">20分钟</a-radio>
        <a-radio v-model:checked="checked">20分钟</a-radio>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts">
import { defineComponent, computed, inject, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
// import { genMenuInfo } from '@/utils/menu-util';
import { default as WrapContent } from '@/components/base-layouts/wrap-content/index.vue';
import { default as GlobalFooter } from '@/components/base-layouts/global-footer/index.vue';
import { default as SiderMenu } from '@/components/base-layouts/sider-menu/index.vue';
import { default as HeaderView } from '@/components/base-layouts/header/index.vue';
import { default as SelectLang } from '@/components/select-lang/index.vue';
import { default as AvatarDropdown } from '@/components/avatar-dropdown.vue';
import { default as SettingDrawer } from '@/components/setting-drawer/index.vue';
import { default as NoticeIcon } from '@/components/notice-icon/index.vue';
import { BellOutlined } from '@ant-design/icons-vue';
import { MultiTab } from '@/components/multi-tab';
import { useStore } from 'vuex';
import { injectMenuState } from './use-menu-state';
import ls from '@/utils/local-storage';
import passmodal from '@/components/modifyPass/index.vue';
import version from '@/components/version/index.vue';
import { queryYjResultList } from '@/api/magic-cube/four-color';
import MTag from '@/components/m-tag/index.vue';
import yj_red from '@/assets/yj-red.png';
import yj_orange from '@/assets/yj-orange.png';
import yj_yellow from '@/assets/yj-yellow.png';
import yj_blue from '@/assets/yj-blue.png';
import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'BasicLayout',
  setup() {
    const store = useStore();
    const { t } = useI18n();
    const menuState = injectMenuState();
    const isMobile = inject('isMobile', ref(false));
    const currentUser = computed(() => store.getters['user/currentUser']);
    const hasSideMenu = computed(
      () => menuState.layout.value === 'side' || menuState.layout.value === 'left',
    );
    const hasTopMenu = computed(() => menuState.layout.value === 'top');
    const visible = ref(process.env.NODE_ENV === 'development');
    // 根据路由生成菜单
    // const allowRouters = computed(() => store.getters[`user/allowRouters`]);
    // const menus = computed(() => genMenuInfo(allowRouters.value).menus);
    // 根据接口生成菜单
    const menus = ls.get('user_menu');

    //修改密码
    const handlepasshow = () => {
      passRef.value.showModal();
    };
    const statusNews = ref<number>(1);
    const movisible = ref<boolean>(false);
    const drvisible = ref<boolean>(false);
    const destroyOnClose = ref<boolean>(true);
    const totalCount = ref<number>();
    const tableData = ref<any>([]);
    const state = ref({
      checked1: true,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
    });
    const params = ref({
      page: 1,
      size: 10,
      display: false,
    });
    // 弹窗
    const showModal = () => {
      movisible.value = true;
      params.value.display = true;
      params.value.size = 3;
      resultList();
    };
    const handleOk = () => {
      movisible.value = false;
    };
    // 消息提醒
    const onClose = () => {
      drvisible.value = false;
    };
    const showDrawer = () => {
      statusNews.value = 1;
      drvisible.value = true;
      params.value.display = false;
      params.value.size = 10;
      resultList();
    };

    const resultList = async () => {
      tableData.value = [];
      const res = await queryYjResultList(params.value);
      if (res.code && res.code === 200) {
        totalCount.value = res.data.count;
        res.data.details.forEach(item => {
          item.createTime = item.createTime.split(' ')[0];
          const rankInfo = JSON.parse(item.rankInfo || '{}');
          item.key = item.modelId;
          item.subsetXqdwName = rankInfo.xqdwList?.slice(0, 3).map(o => o.name); // 下属高发辖区
          item.rule = item.rule.slice(0, 3).map(o => {
            o.callSummaryCode = o.callSummaryCode.filter(e => e);
            o.classifyCode = o.classifyCode.filter(e => e);
            o.dealSummaryCode = o.dealSummaryCode.filter(e => e);
            o.xqdwCode = o.xqdwCode.filter(e => e);
            return o;
          });
        });
        tableData.value = res.data.details;
      }
    };
    const setupClick = () => {
      statusNews.value = 2;
    };
    //  方法 - 周期类型数据转换
    const setPeriod = (period: string): string => {
      let s = '';
      switch (period) {
        case 'D':
          s = '日';
          break;
        case 'W':
          s = '周';
          break;
        case 'M':
          s = '月';
          break;
      }
      return s;
    };
    //  table - 设置预警等级数据及颜色
    const warnLevelColor = (row: any): any => {
      let _color;
      switch (row.yjLevel) {
        case '1':
          _color = '#FF2B4D';
          row.levelText = '红色预警';
          row.path = yj_red;
          break;
        case '2':
          _color = '#FF6F1C';
          row.levelText = '橙色预警';
          row.path = yj_orange;
          break;
        case '3':
          _color = '#ECD60D';
          row.levelText = '黄色预警';
          row.path = yj_yellow;
          break;
        case '4':
          _color = '#1CDAFF';
          row.levelText = '蓝色预警';
          row.path = yj_blue;
          break;
      }
      return _color;
    };
    //分页
    const onChange = async (pageNumber: number) => {
      params.value.page = pageNumber;
      resultList();
    };
    const onShowSizeChange = (current: number, pageSize: number) => {
      params.value.page = 1;
      params.value.size = pageSize;
      resultList();
    };
    const router = useRouter();
    const modelClick = id => {
      movisible.value = false;
      drvisible.value = false;
      let routeUrl = router.resolve({
        path: '/early-warning/four-color-warning/detail',
        query: {
          ruleId: id,
        },
      });
      window.open(routeUrl.href, '_blank');
    };
    //关于
    const versionRef = ref();
    const handleversionRef = () => {
      versionRef.value.showModal();
    };
    onMounted(() => {
      resultList();
    });
    const passRef = ref();
    return {
      handleversionRef,
      t,
      currentUser,
      menus,
      handlepasshow,
      ...menuState,
      hasSideMenu,
      hasTopMenu,
      isMobile,
      passRef,
      visible,
      movisible,
      drvisible,
      destroyOnClose,
      statusNews,
      state,
      tableData,
      totalCount,
      params,
      versionRef,
      //方法
      showModal,
      handleOk,
      onClose,
      showDrawer,
      setupClick,
      setPeriod,
      warnLevelColor,
      onChange,
      onShowSizeChange,
      modelClick,
    };
  },
  components: {
    MultiTab,
    WrapContent,
    SiderMenu,
    GlobalFooter,
    HeaderView,
    SelectLang,
    AvatarDropdown,
    SettingDrawer,
    NoticeIcon,
    passmodal,
    version,
    BellOutlined,
    MTag,
  },
});
</script>

<style lang="less">
@import '../components/base-layouts/basic-layout.less';
.iconBell {
  margin: 15px 20px 0 20px;
  font-size: 18px;
  cursor: pointer;
}
.drawer {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
}
.coreSetup {
  margin-right: 50px;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.remind {
  margin-top: 10px;
  padding: 10px;
  background-color: #393a40;
}
.switch {
  width: 200px;
  line-height: 40px;
  text-align: right;
}
.read {
  padding: 0 5px;
  font-size: 12px;
}
.level-style {
  span {
    padding: 0 6px;
    font-weight: 400;
    font-family: Source Han Sans CN;
    vertical-align: middle;
  }
}
.iconPosition {
  position: absolute;
  top: 18px;
  left: -2px;
  font-size: 40px;
}
.icon-AIjiaobiao {
  color: #e99220;
}
.icon-jiejingjiaobiao {
  color: #1ccaff;
}
.icon-fankuijiaobiao {
  color: #3191ff;
}
</style>
